<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">昵称</text>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="text-input flex-r ac">
				<input type="text" class="input" :value="nickname" @input="input" @confirm="nameConfirm" :maxlength="5" confirm-type="完成" placeholder="请输入昵称"></input>
				<text class="text-num" :class="{'active': textNum == 5}">{{textNum}}/5</text>
			</view>
			<view class="submit-box">
				<button type="default" :class="{'active': canSave}" @tap="nameConfirm">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import imMsg from "@/utils/common/message.js";
	export default {
		data() {
			return {
				nickname: '',
				textNum: 0
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			canSave() {
				return this.nickname.length > 1 && this.nickname.length < 6
			}
		},
		onLoad() {
			if(!this.user.nickname.includes('*******')){
				this.nickname = this.user.nickname
				this.textNum = this.user.nickname.length
			}
		},
		methods: {
			//计算输入字数
			input(e) {
				this.nickname = e.detail.value.trim()
				this.textNum = this.nickname.length
				console.log(this.nickname.length);
			},
			//昵称修改确认
			nameConfirm() {
				console.log(this.nickname);
				if(this.nickname){
					if(this.nickname.length < 2 || this.nickname.length > 5){
						this.$ShowToast({text: '请输入2-5位长度的昵称', type: 2})
						return false;
					}
					if(this.nickname == this.user.nickname){
						this.$ShowToast({text: '新昵称和原昵称不能相同', type: 2})
						return false;
					}
					this.submitEditName(this.nickname);
				}else{
					this.$ShowToast({text: '请输入新的昵称', type: 2})
				}
			},
			//提交修改昵称
			submitEditName(name){
				console.log(name);
				let userInfoModel = {
					nickname: name
				}
				this.editUserInfo(userInfoModel)
			},
			//修改用户基础信息
			editUserInfo(userInfoModel) {
				this.$http.post({
					url: '/api/appUser/editUserInfo',
					data: {
						userId: this.user.userId,
						...userInfoModel
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						uni.showToast({
							title: '修改成功！',
							icon: 'success',
							duration: 1500
						})
						//请求用户最新信息
						this.$store.commit('UPDATE_USERINFO', userInfoModel)
						setTimeout(()=>{
							//更新IM用户资料
							if(this.$store.state.imReady){
								imMsg.updateMyProfile()
							}
							this.$goBack(1)
						}, 1500)
					}else{
						console.log(data);
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
					this.$ShowToast({text: '请求错误，请稍后重试', type: 2})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background: #FFFFFF;
		min-height: var(--safe-height);
	}
	.body{
		margin-top: 20rpx;
		padding: 0 20rpx;
		.text-input{
			background: #F2F5FA;
			border-radius: 10rpx;
			padding: 35rpx 20rpx;
			font-size: 28rpx;
			.input{
				flex: 2;
				font-size: 28rpx;
			}
			.text-num{
				font-size: 28rpx;
				color: #999999;
				&.active{
					color: $uni-primary;
				}
			}
		}
		.submit-box{
			margin-top: 40rpx;
		}
	}
</style>
